import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { getVersionAsync } from "@/store/version/versionSlice";
import { Space } from "antd";
import { useEffect, type ReactElement } from "react";
import { shallowEqual } from "react-redux";
import Filter from "../Filter";
import Table from '../Table'
import Create from "../Create";

export default function Panel(): ReactElement<typeof Space, "div"> {
  const { params, table } = useAppSelector(
    (state) => state.version,
    shallowEqual
  );
  const dispatch = useAppDispatch();
  useEffect(() => {
    if (["init", "error"].includes(table.status)) {
      dispatch(getVersionAsync({ ...params }));
    }
  }, []);
  return (
    <Space direction="vertical" size="large" className="w-full">
      <Filter />
      <Table />
      <Create />
    </Space>
  );
}
